<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统数据统计 - 毕业招聘系统</title>
    <link rel="stylesheet" href="../style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .stats-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .stats-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .stat-card {
            background: var(--white);
            border-radius: 10px;
            padding: 20px;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
        }
        .stat-card:hover {
            transform: translateY(-5px);
        }
        .stat-card .title {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 10px;
        }
        .stat-card .value {
            font-size: 28px;
            font-weight: bold;
            color: var(--primary);
            margin-bottom: 5px;
        }
        .stat-card .change {
            font-size: 12px;
            display: flex;
            align-items: center;
        }
        .change.positive {
            color: var(--success);
        }
        .change.negative {
            color: var(--danger);
        }
        .charts-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .chart-container {
            background: var(--white);
            border-radius: 10px;
            padding: 20px;
            box-shadow: var(--shadow);
            height: 350px;
        }
        .chart-title {
            font-size: 16px;
            margin-bottom: 15px;
            color: var(--text-primary);
        }
        .date-filter {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .date-filter select {
            padding: 8px 12px;
            border-radius: 5px;
            border: 1px solid var(--border);
            background: var(--white);
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <!-- 导航栏 -->
        <nav class="navbar">
            <div class="logo">毕业招聘系统</div>
            <div class="nav-links">
                <a href="admin-dashboard.html" class="active">数据统计</a>
                <a href="admin-announcements.html">公告管理</a>
                <a href="admin-users.html">用户管理</a>
                <a href="#" id="logoutBtn">退出登录</a>
            </div>
        </nav>

        <!-- 主要内容 -->
        <main class="stats-container">
            <div class="stats-header">
                <h1>系统数据统计</h1>
                <div class="date-filter">
                    <span>时间范围:</span>
                    <select id="dateRangeSelect">
                        <option value="7">近7天</option>
                        <option value="30" selected>近30天</option>
                        <option value="90">近90天</option>
                        <option value="365">近一年</option>
                    </select>
                </div>
            </div>

            <!-- 数据概览卡片 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="title">总用户数</div>
                    <div class="value" id="totalUsers">0</div>
                    <div class="change positive"><i class="icon"></i> 较上月增长 12.5%</div>
                </div>
                <div class="stat-card">
                    <div class="title">企业用户</div>
                    <div class="value" id="companyUsers">0</div>
                    <div class="change positive"><i class="icon"></i> 较上月增长 8.3%</div>
                </div>
                <div class="stat-card">
                    <div class="title">求职用户</div>
                    <div class="value" id="jobSeekerUsers">0</div>
                    <div class="change positive"><i class="icon"></i> 较上月增长 15.2%</div>
                </div>
                <div class="stat-card">
                    <div class="title">活跃职位</div>
                    <div class="value" id="activeJobs">0</div>
                    <div class="change negative"><i class="icon"></i> 较上月减少 2.1%</div>
                </div>
                <div class="stat-card">
                    <div class="title">简历总数</div>
                    <div class="value" id="totalResumes">0</div>
                    <div class="change positive"><i class="icon"></i> 较上月增长 22.7%</div>
                </div>
                <div class="stat-card">
                    <div class="title">职位申请</div>
                    <div class="value" id="totalApplications">0</div>
                    <div class="change positive"><i class="icon"></i> 较上月增长 18.4%</div>
                </div>
                <div class="stat-card">
                    <div class="title">待审核企业</div>
                    <div class="value" id="pendingCompanies">0</div>
                    <div class="change negative"><i class="icon"></i> 较昨日减少 5</div>
                </div>
                <div class="stat-card">
                    <div class="title">面试邀请</div>
                    <div class="value" id="interviewApplications">0</div>
                    <div class="change positive"><i class="icon"></i> 较昨日增长 12</div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="charts-row">
                <div class="chart-container">
                    <div class="chart-title">用户与职位趋势</div>
                    <canvas id="trendsChart"></canvas>
                </div>
                <div class="chart-container">
                    <div class="chart-title">申请状态分布</div>
                    <canvas id="applicationStatusChart"></canvas>
                </div>
            </div>

            <div class="charts-row">
                <div class="chart-container">
                    <div class="chart-title">职位行业分布</div>
                    <canvas id="industryChart"></canvas>
                </div>
                <div class="chart-container">
                    <div class="chart-title">薪资范围分布</div>
                    <canvas id="salaryChart"></canvas>
                </div>
            </div>
        </main>
    </div>

    <script src="admin-stats.js"></script>
</body>
</html>